<template>

  <div id="app">
    <div id="header">
      <div id="header-content">
        <router-link id="user" tag="span" to="/AboutAutor">心之所向</router-link>
        <!-- <span >心之所向</span> -->
        <ul id="nav">
          <li>
            <router-link to="/PcIndex/FrontPage" v-slot="{ navigate }">
              <a @click="navigate" class="nav-link"><img src="../assets/images/FrontPage.png" class="nav-img" />首页</a>
            </router-link>
            <!-- <a href=""><img src="../assets/images/logo.png" class="nav-img">首页</a> -->
          </li>
          <li>
            <router-link to="/PcIndex/Archive" v-slot="{ navigate }">
              <a @click="navigate" class="nav-link"><img src="../assets/images/Archive.png" class="nav-img" />归档</a>
            </router-link>
            <!-- <a href=""><img src="../assets/images/logo.png" class="nav-img">归档</a> -->
          </li>
          <li>
            <router-link to="/PcIndex/FriendLink" v-slot="{ navigate }">
              <a @click="navigate" class="nav-link"><img src="../assets/images/FriendLink.png" class="nav-img" />友情链接</a>
            </router-link>
            <!-- <a id="FriendLink" href="https://blog.icetea.vip"><img src="../assets/images/FriendLink.png" class="nav-img">友情链接</a> -->
          </li>
          <li>
            <router-link to="/PcIndex/Topic" v-slot="{ navigate }">
              <a @click="navigate" class="nav-link"><img src="../assets/images/Topic.png" class="nav-img" />主题</a>
            </router-link>

          </li>

          <li @mouseenter="mouseEnter " @mouseleave="mouseLeave" id="write">
            <a class="nav-link"><img src="../assets/images/write.png" class="nav-img" />发表</a>
            <span v-show="publish">
              <router-link to="/PcIndex/Write" tag="li">
                <a>写心情</a>
              </router-link>
              <router-link to="/PcIndex/Write2" tag="li">
                <a>写文章</a>
              </router-link>
            </span>
          </li>
          <li>
            <router-link to="/PcIndex/AboutAutor" v-slot="{ navigate }">
              <a @click="navigate" class="nav-link"><img src="../assets/images/AboutAutor.png" class="nav-img" />关于我</a>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div id="main">
      <div id="main-left">
        <div id="user-overview">
          <div id="img">
            <img src="../assets/images/9.png" />
          </div>
          <div id="user-name">
            <img src="../assets/images/fan.png" alt="" />
            <span>Sean</span>
          </div>
          <div id="data-overview">
            <div>
              <p>{{articleData.length}}</p>
              <p>文章</p>
            </div>
            <div>
              <p>{{feelingData.length}}</p>
              <p>说说</p>
            </div>
            <div>
              <p>{{ArticleRevData.length+feelRevData.length}}</p>
              <p>评论</p>
            </div>
          </div>
        </div>
        <div id="linked-comment">
          <ul>
            <li>
              <a href=""><img src="../assets/images/logo.png" alt="" />声明式编程</a>
            </li>
            <li>
              <a href=""><img src="../assets/images/logo.png" alt="" />命令式编程</a>
            </li>
            <li>
              <a href=""><img src="../assets/images/logo.png" alt="" />函数的方法</a>
            </li>
            <li>
              <a href=""><img src="../assets/images/logo.png" alt="" />数组的使用</a>
            </li>
            <li>
              <a href=""><img src="../assets/images/logo.png" alt="" />事件的触发</a>
            </li>
          </ul>
          <p>潜水中</p>
        </div>
        <div id="create-time">
          <img src="../assets/images/dog.jpg" alt="" />
          <span>{{time.year}}{{time.month}}{{time.day}}{{time.hour}}{{time.minute}}{{time.second}}</span>
        </div>
        <div id="review-show">
          <h4 class="section-label">
            <img src="../assets/images/reviewshow.png" alt="" />最近评论
          </h4>
          <ul>
            <li v-for="feelItem in feelRevData.slice(0,4)">
              <!-- <img src="../assets/images/logo.png" alt="" /> -->
              <div>
                <p>
                  <span>{{feelItem.autor}}</span>
                  于
                  <span>{{getArtTime(feelItem.time)}}</span>
                  在
                  <span>「{{cutfeelcont(4,feelItem.feelingid,feelingData)}}」</span>
                  中说：
                </p>
                <span>{{feelItem.content}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div id="main-middle">
        <div id="middle-content">
          <router-view></router-view>
        </div>
      </div>
      <div id="main-right">
        <div>
          <p>
            我的心灵和我的一切我都愿你拿去，
            只求你给我留下一双眼睛，让我能看到你。
            在我的身上没有不曾被你征服的东西。你夺
            去了它的生命，也就将它的死亡携去，如果我还
            须失掉什么，但愿你将我带去，只求你给我留下 一双眼睛，让我能看到你。
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;----《我的心灵和我的一切》
          </p>
        </div>
        <div>
          <AudioPlayer />
        </div>
        <div id="article">
          <h4 class="section-label">
            <img src="../assets/images/article.png" alt="" />文章
          </h4>
          <ul>
            <li v-for="ArItem in articleData.slice(0,5)" ::key="ArItem.id">
              <p>{{ArItem.title}}</p>
              <div>
                <span><img src="../assets/images/bluegood.png" alt="" />{{ArtlikeNum(ArItem.id)}}</span>
                <span><img src="../assets/images/bluetime.png" alt="" />{{getArtTime(ArItem.time)}}</span>
                <span><img src="../assets/images/bluereviewshow.png" alt="" />{{ArtRevNum(ArItem.id)}}</span>
              </div>
            </li>


          </ul>
        </div>
        <div id="recent-visitor">
          <h4 class="section-label">
            <img src="../assets/images/visitor.png" alt="" />最近访客
          </h4>
          <ul>
            <!-- 因博主知识匮乏，此功能暂未能开放，敬请期待！！！不过憨批博主已充电中！ -->
          </ul>
        </div>
        <div id="personal-label">
          <h4 class="section-label">
            <img src="../assets/images/label.png" alt="" />个人标签
          </h4>
          <div id="label-text">
            <a href="">炉石</a>
            <a href="">html</a>
            <a href="">css</a>
            <a href="">js</a>
            <a href="">Vue</a>
            <a href="">nodejs</a>
            <a href="">前端</a>
          </div>
        </div>
      </div>
    </div>
    <div id="footer">
      <p>版权所有 IceTea|<a href="https://beian.miit.gov.cn/">粤ICP备2021129090号-1</a></p>
      <p>此博客已经运行了{{time.year}}{{time.month}}{{time.day}}{{time.hour}}{{time.minute}}{{time.second}}</p>
    </div>
  </div>
</template>

<script>
  import AudioPlayer from "../components/AudioPlayer";
  import { v4 as uuidv4 } from 'uuid';
  uuidv4()

  export default {
    name: "PcIndex",
    data() {
      return {
        list: {},
        articleData: "",
        Artlikenum: "",
        feelingData: "",
        feelRevData: "",
        ArticleRevData: "",
        publish: false,
        isShowa: false,
        isShowb: false,
        time: {
          year: "",
          month: "",
          day: "",
          hour: "",
          minute: "",
          second: ""
        }

      }
    },
    components: {
      AudioPlayer,
    },
    computed: {
      //计算时间差
      getArtTime() {
        return function (time) {
          let date = new Date(time)
          let nowDate = new Date()
          let time1 = nowDate.getTime() - date.getTime()
          let time2 = Math.floor(time1 / 86400000)
          let endTime = ""
          if (time2 <= 0  ) {
            endTime = "今日"
          } else if (time2 < 60) {
            endTime = time2 + "日前"
          } else if (60 < time2 < 365) {
            let time3 = parseInt(time2 / 30);
            endTime = time3 + "月前"
          }
          return endTime
        }
      },
      //切割说说内容作为标题
      cutfeelcont() {
        return function (num, index, arr) {
          let newArr = arr
          let str = ""
          newArr.forEach(e => {
            // e.id=index
            if (e.id == index) {
                str = e.content
              }
          });
          let str1 =str.slice(0, num)
          return str1

        }
      },

      //计算文章的点赞数量
      ArtlikeNum() {
        return function (value,) {
          let Arr = this.Artlikenum;
          let count = 0;
          //计算当前文章的点赞条数
          if (Arr.length !== 0) {
            Arr.map((a) => {
              if (a.articleid == value) {
                count++
              }
              return count
            })
            return count
          }
        }
      },
      //计算每条文章的评论数
      ArtRevNum() {
        return function (value) {
          let Arr = this.ArticleRevData
          let count = 0;
          if (Arr.length !== 0) {
            Arr.map((a) => {
              if (a.articleid == value) {
                count++
              }
              return count
            })
            return count
          }


        }
      }
    },
    methods: {
      mouseEnter() {
        this.publish = true;
      },
      mouseLeave() {
        this.publish = false;
      },

    },
    created() {
      let bb = uuidv4()
      // console.log(bb)  
      if (localStorage.getItem("userUuid") === null) {
        localStorage.setItem("userUuid", bb)
      }
      //请求文章数据
      fetch(process.env.VUE_APP_API_URL + "/Archive", {
        method: 'post',
        headers: new Headers({
          'Content-Type': 'application/x-www-form-urlencoded',
          //'application/json'
        })
      })
        .then((res) => {
          return res.json()
        })
        .then((data) => {
          this.articleData = data.reverse()
        })
        .catch((error) => { console.error('Error:', error) })
      //请求说说数据
      fetch(process.env.VUE_APP_API_URL + "/FrontPage", {
        method: 'post',
        headers: new Headers({
          'Content-Type': 'application/x-www-form-urlencoded'
        })
      })
        .then((res) => {
          return res.json()
        })
        .then((data) => {
          this.feelingData = data.reverse();
          // console.log(this.getDataArr)
        })
        .catch((error) => { console.error('Error:', error) })
      //请求说说评论数据
      let b = { "value": "true" }
      fetch(process.env.VUE_APP_API_URL + "/FrontPageRev", {
        method: 'post',
        body: JSON.stringify(b),
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      })
        .then((res) => {
          return res.json()
        })
        .then((data) => {
          this.feelRevData = data
        })
        .catch((error) => { console.error('Error:', error) })
      //请求文章的评论数据
      fetch(process.env.VUE_APP_API_URL + "/ArchiveRev", {
        method: 'post',
        headers: new Headers({
          //'application/json'
          'Content-Type': 'application/json'
        })
      })
        .then((res) => {
          return res.json()
        })
        .then((data) => {
          this.ArticleRevData = data
          // console.log(this.ArticleRevData)
        })
        .catch((error) => { console.error('Error:', error) })
      //请求点赞数据库
      let uuid = localStorage.getItem("userUuid")
      let a = { "value": "true", "key": uuid };
      fetch(process.env.VUE_APP_API_URL + "/artLikeNum", {
        method: 'post',
        body: JSON.stringify(a),
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      })
        .then((res) => {
          return res.json()

        })
        .then((data) => {
          this.Artlikenum = data
          // console.log(data)
        })
        .catch((error) => { console.error('Error:', error) })


    },
    mounted() {
      this.timer = setInterval(() => {
        //开始时间
        var date1 = '2021-10-01 12:00:00';
        //结束时间
        var date2 = new Date();
        //时间差的毫秒数    
        var date3 = date2.getTime() - new Date(date1).getTime();
        //获取总共的分钟差  
        var subMinutes = Math.floor(date3 / (60 * 1000))

        //计算出相差天数
        var days = Math.floor(date3 / (24 * 3600 * 1000))
        //计算月数
        if (days < 30) {
          this.time.day = days + "天"
        }
        if (days > 30) {
          this.time.month = Math.floor(days / 30) + "月"
          this.time.day = (days % 30) + "天"
        } else if (days > 365) {
          this.time.year = (days / 365) + "年"
          days = days % 365
        }

        //计算出小时数
        var leave1 = date3 % (24 * 3600 * 1000)
        //计算天数后剩余的毫秒数

        this.time.hour = Math.floor(leave1 / (3600 * 1000)) + "时"

        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000)
        //计算小时数后剩余的毫秒数
        this.time.minute = Math.floor(leave2 / (60 * 1000)) + "分"
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000)
        //计算分钟数后剩余的毫秒数
        this.time.second = Math.round(leave3 / 1000) + "秒"
        // console.log(time)


      }, 1000)


    },
    beforDestroy() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    }
  };
</script>
<!-- <script src="../public/js/script.js"></script> -->

<style scoped>
  /* @import '../public/css/style.css'; */

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 5px auto;
    height: 80%;
    width: 100%;
  }

  /* #header {
    display: block;
  } */

  #header-content {
    margin: 0 auto;
    width: 1000px;
    background-color: beige;
  }

  #user {
    display: inline-block;
    vertical-align: middle;
    font-size: 22px;
    cursor: pointer;
    margin: 10px 20px 10px 10px;
  }

  #nav {
    display: inline-block;
    vertical-align: middle;
    /* width: 800px; */
  }

  #nav>li {
    float: left;
    margin: 0px 10px;
    padding: 9px 5px;
    font-size: 18px;
    cursor: pointer;
    position: relative;
  }

  #nav>li>a:hover {
    color: #007aff;
  }

  #nav>li:hover {
    background-color: rgb(226, 225, 218);
    color: #007aff;
    /* font-weight: bold; */
    transform: scale(1.1);
    transition: all 0.5s;
  }

  #nav>li:after {
    content: '';
    position: absolute;
    width: 0;
    bottom: 0;
    left: 50%;
    height: 2px;
    background-color: #007aff;
  }

  #nav>li:hover::after {
    width: 99%;
    left: 0%;
    margin: 0 auto;
    border-radius: 6px 6px 0 0;
    transition: all 0.5s;
  }


  #nav #write {
    position: relative;

  }

  #nav>#write>span {
    width: 64px;
    background-color: rgba(233, 216, 200, 0.9);
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 42px;
    cursor: pointer;

  }

  #nav>#write>span>li {
    font-size: 12px;
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
  }

  #nav>#write>span>li>a:hover {
    color: #007aff;
  }

  #nav>#write>span>li:hover {
    font-weight: bold;
    color: #007aff;
    /* text-align: center; */
    transform: scale(1.1);
    background-color: rgb(233, 192, 79);
  }

  #nav>#write>span>a {
    width: 100%;
    height: 30px;
    /* font-size: 12px; */
    vertical-align: middle;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  .nav-link {
    display: flex;
    align-items: center;
  }

  #nav .nav-img {
    width: 15px;
    height: 15px;
    margin-right: 3px;
  }


  #main:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
  }

  #main {
    margin: 5px auto;
    width: 1000px;
    height: 845px;
  }

  #main>div {
    float: left;
  }

  #main-left {
    width: 200px;
  }

  #main-middle {
    width: 590px;
    height: 846px;
    /* overflow: hidden; */
    margin: 0 5px;
    background: url("../assets/images/contentbg.jpg");
    background-repeat: no-repeat;
    background-size: 590px 846px;
  }

  #main-right {
    width: 200px;
  }

  #img {
    width: 20px;
  }

  #img>img {
    width: 200px;
    height: 80px;
    border-radius: 10px 10px 0px 0px;
  }

  #user-overview {
    position: relative;
    background-color: white;
  }

  #data-overview {
    text-align: center;
  }

  #data-overview>div {
    float: left;
    margin: 10px 15px 0 15px;
    padding-top: 50px;
    padding-bottom: 20px;
  }

  #data-overview:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  #user-name {
    position: absolute;
    left: 15%;
    top: 40%;
    height: 50px;
  }

  #user-name>span {
    margin-left: 20px;
    font-size: 20px;
  }

  #user-name>img {
    height: 50px;
    width: 50px;
    background-color: pink;
    vertical-align: middle;
  }

  #linked-comment {
    background-color: white;
    width: 200px;
    /* height: 300px; */
    margin-top: 5px;
  }

  #linked-comment>p {
    margin: 10px 0 0px 30px;
    padding-bottom: 5px;
  }

  #linked-comment>ul {
    margin-top: 15px;
    /* text-align: center; */
  }

  #linked-comment>ul>li {
    display: block;
    text-align: center;
    height: 30px;
    margin-left: 30px;
    line-height: 30px;
    border-bottom: 1px solid rgb(187, 184, 184);
  }

  #linked-comment>ul>li>a>img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }

  #create-time {
    background-color: white;
    display: flex;
    margin-top: 5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #create-time>img {
    padding-top: 10px;
    width: 50px;
    height: 50px;
  }

  #create-time>span {
    margin-bottom: 10px;
  }

  #review-show {
    background-color: white;
    margin-top: 5px;
    min-height: 250px;
  }

  #review-show>ul>li {
    border-top: 1px solid rgb(209, 206, 206);
    padding: 5px 10px;
    display: flex;
    font-size: 10px;
  }

  #review-show>ul>li>div>p>span {
    color: rgb(231, 101, 61);
  }

  #review-show>ul>li>img {
    width: 50px;
    height: 50px;
    display: inline-block;
  }

  #review-show>ul>li>span {
    font-size: 10px;
    margin-left: 5px;
  }



  #main-right>div:nth-child(1) {
    background-color: white;
  }

  #main-right>div:nth-child(1)>p {
    padding: 10px 8px;
    text-indent: 33px;
    font-size: 12px;
  }

  #main-right>div:nth-child(2) {
    width: 200px;
    margin-top: 5px;
  }

  #article {
    width: 200px;
    min-height: 250px;
    background-color: white;
    /* font-size: 12px; */
    margin-top: 5px;
  }

  #article p {
    margin: 0px 15px;
  }

  #article div {
    margin: 5px 15px 5px 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  #article div>span {
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 10px;
  }

  #article>ul>li {
    width: 200px;
    border-top: 1px solid rgb(209, 206, 206);
  }

  #article div>span>img {
    width: 12px;
    height: 12px;
    margin-right: 2px;
    vertical-align: middle;
  }

  #recent-visitor {
    width: 200px;
    background-color: white;
    margin-top: 5px;
  }

  #recent-visitor>ul>li img {
    width: 40px;
    height: 40px;
    background-color: pink;

    margin: 10px;
    vertical-align: middle;
  }

  #recent-visitor>ul>li a {
    margin: auto 10px;
  }

  #personal-label {
    width: 200px;
    background-color: white;
    margin-top: 5px;
  }

  #label-text {
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
  }

  #label-text>a {
    background-color: rgb(216, 209, 209);
    font-size: 12px;
    margin: 5px;
    padding: 2px 5px;
  }

  #footer {
    height: 80px;
    text-align: center;
    font-size: 12px;
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  #footer>p {
    padding-top: 5px;
  }

  #footer>p>a {
    color: white;
  }

  .section-label {
    padding: 5px 15px;
    font-size: 16px;
  }

  .section-label>img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
  }
</style>